<div>
  <p-dataTable [value]="cars" [editable]="true">
    <p-column field="vin" header="Vin" [editable]="true"></p-column>
    <p-column field="year" header="Year" [editable]="true"></p-column>
    <p-column field="brand" header="Brand" [editable]="true">
      <ng-template let-col let-car="rowData" pTemplate="editor">
        <p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"
          appendTo="body"></p-dropdown>
      </ng-template>
    </p-column>
    <p-column field="color" header="Color" [editable]="true"></p-column>
    <p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
      <ng-template let-col let-car="rowData" pTemplate="body">
        {{car[col.field]|date }}
      </ng-template>
      <ng-template let-col let-car="rowData" pTemplate="editor">
        <p-calendar [(ngModel)]="car[col.field]" appendTo="body"></p-calendar>
      </ng-template>
    </p-column>
  </p-dataTable>
</div>
